<html>
<head>
    <meta charset="utf-8">
    <script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>
    <script src='/js/echarts-wordcloud.js'></script>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}">
    <script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.min.js}"></script>
</head>
<body>
<!--<style>-->
<!--    html, body, #main {-->
<!--        width: 50%;-->
<!--        height: 50%;-->
<!--        margin: 0;-->
<!--    }-->
<!--</style>-->
<div id='main'></div>
<div id="chart"></div>
<script th:inline="javascript">
    $(document).ready(function () {
            var data = [[${data}]];
            var chart = echarts.init(document.getElementById('main'));

            var option = {
                tooltip: {},
                series: [{
                    type: 'wordCloud',
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                    width: 600,
                    height: 400,
                    drawOutOfBound: true,
                    textStyle: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        textStyle: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: data
                }]
            };

            chart.setOption(option);

            // window.onresize = chart.resize;

            chart = echarts.init(document.getElementById('chart'));

            // 定义时间轴的数据
            const timelineData = [[${timelineData}]];
            // 事件的数据
            const eventData = [[${eventData}]];

            // 定义时间轴的配置
            const timelineOption = {
                axisType: 'category',
                autoPlay: true,
                playInterval: 2000,
                data: timelineData,
                label: {
                    formatter: function (value) {
                        var event = eventData.find(function (event) {
                            return event.value === value;
                        });
                        return event ? event.name : '';
                    },
                },
            };

            // 定义事件的配置
            const eventOption = {
                type: 'timeline',
                data: eventData,
            };

            // 定义图表的配置
            option = {
                timeline: timelineOption,
                series: [eventOption],
            };

            // 设置时间轴变化时的事件
            chart.on('timelinechanged', function (params) {
                const selectedEvent = eventData.find(function (event) {
                    return event.value === params.currentIndex;
                });

                if (selectedEvent) {
                    document.getElementById('tags').innerText = '个人标签1：涉黄、涉毒、涉赌';
                    document.getElementById('info').innerText = '个人统计信息1：车辆3台，案件2个，关联人15个，关联地点13个';
                }
            });

            // 渲染图表
            chart.setOption(option);
        }
    )
</script>

<!--<script th:inline="javascript">-->
<!--    // 创建 ECharts 实例-->

<!--</script>-->
</body>
</html>